.checkboxInput {
  height: 0;
  width: 0;
  visibility: hidden;
  /* Giving a non-flow position will mean the flexbox wont give a gap around the
  actual hidden input */
  position: absolute;
}

label.checkboxLabel {
  --height: 30px;
  --aspect-ratio: 2.8;
  --animation-speed: 0.2s;
  --toggle-inset: 2px;
  --on-color: var(--rstudio-blue, pink);
  --off-color: var(--grey);
  --width: calc(var(--height) * var(--aspect-ratio));
  --toggle-h: calc(var(--height) - var(--toggle-inset) * 2);
  --toggle-w: calc(var(--width) * 0.5);
  font-size: 12px;
  cursor: pointer;
  color: transparent;
  width: var(--width);
  height: var(--height);
  border-radius: var(--corner-radius);
  background: var(--off-color);
  display: block;
  position: relative;
  margin-inline: 4px;
}

label.checkboxLabel:after {
  content: attr(data-value);
  color: var(--dark-grey);
  text-align: center;
  position: absolute;
  display: grid;
  place-content: center;
  top: var(--toggle-inset);
  left: var(--toggle-inset);
  width: var(--toggle-w);
  height: var(--toggle-h);
  border-radius: calc(var(--corner-radius) - var(--toggle-inset));
  background: var(--rstudio-white);
  transition: var(--animation-speed);
}

.checkboxInput:checked + .checkboxLabel {
  background: var(--on-color);
}

.checkboxInput:checked + .checkboxLabel:after {
  left: calc(100% - var(--toggle-inset));
  transform: translateX(-100%);
}

.checkboxLabel:active:after {
  width: calc(var(--toggle-w) * 1.2);
}
